// 初始化日期
initDate();

// 刷新时间
freshTime();
setInterval(freshTime,1000);

//图表实例
var myChart1;//undefined
var myChart2;
var myChart3;
var myChart4;
var myChart5;
var myChart6;
initChar();

//浏览器窗口改变，重置图表尺寸

window.onresize=function(){
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
}


function initChar(){
    //图表1
    myChart1 = echarts.init(charDom1);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['#8fc31f', '#f35833', '#00ccff', '#ffcc00', '#f5e965', '#a74faf', '#ff9668'],

        series: [
            {
                name: '租金构成占比(元)',
                type: 'pie',
                radius: '30%',
                center: ['50%', '50%'],
                data: [
                    { value: 435, name: '<0.5k' },
                    { value: 679, name: '0.5k-1k' },
                    { value: 848, name: '1k-2k' },
                    { value: 348, name: '2k-3k' },
                    { value: 679, name: '3k-5k' },
                    { value: 848, name: '5k-8k' },
                    { value: 1348, name: '>8k' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            //	                            position:'inside',
                            formatter: '{b} : {c} ({d}%)',
                            fontSize: 10,    //文字的字体大小
                        }
                    },
                    labelLine: { show: true }
                }
            }
        ]
    };
    myChart1.setOption(option);
    //第2个图表
    myChart2 = echarts.init(charDom2);
    myChart2.setOption({
        color:['red','yellow', 'green'],
        xAxis: {
            data: ["5月","6月","7月","8月","9月"],
            axisLabel:{
                color:"#ffc000"
            }
        },
        grid:{left:45},
        yAxis: {
            name:"数量",
            axisLabel:{
                color:"#ffc000"
            },
            nameTextStyle:{
                color:"#ffc000"
            },
        },
        tooltip:{
            trigger:'axis'
        },
        series: [
            {name: '总房源数', type: 'line', data: [5, 15, 26,77,196]},
            {name: '总用户数', type: 'line', data: [120, 200, 320,500,800]},
            {name: '总成交量', type: 'line', data: [30, 70, 20,200,12]}
        ]
    });
    //第3个图表
    myChart3 = echarts.init(charDom3);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['#8fc31f', '#f35833', '#00ccff', '#ffcc00', '#f5e965', '#a74faf', '#ff9668'],

        series: [
            {
                name: '户型构成占比(元)',
                type: 'pie',
                radius: '30%',
                center: ['50%', '50%'],
                data: [
                    { value: 435, name: '<0.5k' },
                    { value: 679, name: '0.5k-1k' },
                    { value: 848, name: '1k-2k' },
                    { value: 348, name: '2k-3k' },
                    { value: 679, name: '3k-5k' },
                    { value: 848, name: '5k-8k' },
                    { value: 1348, name: '>8k' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            //	                            position:'inside',
                            formatter: '{b} : {c} ({d}%)',
                            fontSize: 10,    //文字的字体大小
                        }
                    },
                    labelLine: { show: true }
                }
            }
        ]
    };
    myChart3.setOption(option);
    //第5个图表
    myChart5 = echarts.init(charDom5);
    var option = {
        xAxis: {
            data: ["1层","2层","3层","4层","5层","6层","7层"],
            axisLabel:{
                color:"#ffc000"
            }
        },
        grid:{left:45},
        yAxis: {
            name:"数量",
            axisLabel:{
                color:"#ffc000"
            },
            nameTextStyle:{
                color:"#ffc000"
            },
        },
        tooltip:{
            trigger:'axis'
        },
        series: [
            {name: '用户数', type: 'bar', 
                data: [5,77,196, 15, 26,34,30]
            }
        ],
        color:['yellow']
    };
    myChart5.setOption(option);
    //第6个图表
    myChart6 = echarts.init(charDom6);
    myChart6.setOption({
        xAxis: {
            data: ["视频看房","VR看房","直播看房","线下看房"],
            axisLabel:{
                color:"#00b056"
            }
        },
        grid:{left:45},
        yAxis: {
            name:"数量",
            axisLabel:{
                color:"#00b056"
            },
            nameTextStyle:{
                color:"#00b056"
            },
        },
        tooltip:{
            trigger:'axis'
        },
        series: [
            {name: '用户数', type: 'bar', 
                data: [5,77,196, 15]
            }
        ],
        color:['#00b056']
    });
}

/**
 * 刷新时间
 */
function freshTime(){
    //创建日期对象
    var d = new Date();
    var hours = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    
    timeDom.innerText = get2Num(hours)+":"+get2Num(minutes)+":"+get2Num(seconds);
}

function get2Num(num){
    return num<10?"0"+num:num;
}

/**
 * 初始化日期
 */
function initDate(){
    //创建日期对象
    var d = new Date();
    // console.log(d);
    //获得系统日期
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var date = d.getDate();
    var day = d.getDay();//星期

    dateDom.innerText = year + "年" + month + "月" + date + "号";
    dayDom.innerText = "星期" + getDayByNum(day);
}
/**
 * 根据数字获得汉字星期,0是星期日
 * @param {*} day 
 * @returns 
 */
function getDayByNum(day) {
    switch (day) {
        case 1:
            return "一";
        case 2:
            return "二";
        case 3:
            return "三";
        case 4:
            return "四";
        case 5:
            return "五";
        case 6:
            return "六";
        case 0:
            return "日";
    }
}


